import React, { useEffect, useState, useMemo } from 'react';
import { connect } from 'umi';
import { Form, Button, Col, Row, Space, Tag, Tooltip, InputNumber } from 'antd';
import Select from '@/components/FormCondition/Select';
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
const orderCondition = (props) => {
  const { onChange, setTagVisible,data } = props;
  const { conditionType, amount,tabList=[]} = data;
  const selectList = [
    { name: '毕业年份条件', value: 'examYears', disabled: true },
    { name: '标签权限', value: 'tagIds', disabled: true },
    { name: '商品权限', value: 'goodsIds', disabled: true },
    { name: '阶段权限', value: 'stages', disabled: true },
    { name: '意向方向条件', value: 'intention', disabled: true }
  ]
  return (
    <Row>
 <Col span={4}>
          <Select
             disabled={true}
             value={'tagIds'}
            placeholder="请选择类型"
            select={selectList}
          ></Select>
        </Col>
      <Col span={4}>
        <Select
          onChange={(e) => {
            onChange({conditionType:e,amount:'',})
          }}
          value={conditionType}
          select={[
            { name: '全部', value: 'all' },
            { name: '任意', value: 'any' },
          ]}
        ></Select>
      </Col>
      {conditionType === 'any' && (
        <Col span={4}>
          <InputNumber
            style={{ width: '100%' }}
            value={amount}
            onChange={(e) => {
              onChange({amount:e,})
            }}
            placeholder="请输入数量"
          ></InputNumber>
        </Col>
      )}
      <Col
        onClick={() => {
          setTagVisible({
            show: true,
            detail: tabList,
          });
        }}
        style={{
          border: '1px solid #bfbfbf',
          boxSizing: 'border-box',
          height: 32,
          display: 'flex',
          alignItems: 'center',
          padding: '0 12px'
        }}
        className="font_hide"
        span={12}
      >
        {tabList.length === 0 && <div style={{ color: '#999999' }}>选择标签</div>}
        {
          <Tooltip
            title={tabList.map((item, index) => {
              return item.tagName;
            }).toString()}
          >
            <div className="font_hide">
              {tabList.map((item, index) => {
                return item.tagName;
              }).toString()}
            </div>
          </Tooltip>
        }
      </Col>
    </Row>
  );

};

export default connect(({ behaviorEecord, loading }) => ({
  loading: loading.models.behaviorEecord,
}))(orderCondition);
